<style type="text/css">

  #master {
    position: static;
    z-index: 0;
  }
  #container {
    position:absolute;
    top: 60px;
    bottom: 60px;
    left: 30px;
    right: 30px;
    width:100%;
    height:100%;
    z-index: 100;
  }
  #overlay {
    position: absolute;
    z-index: 100;
    top:60px;
    left: 30px;
    width: 270px;
    border: 2px solid grey;
    color: white;
    background-color: black;
    opacity: 0.75;
  }
  #overlay a { color: lightblue};
</style>

<div id="master">
  <div id="container"></div>
  <div id="overlay">Current graph generated at: <%= @graph_generated_at.strftime("%I:%M%p") if @graph_generated_at %>.<br/></div>
</div>

<script language="javascript" type="text/javascript">
function delete_entity_children(id){
  var XHR = new XMLHttpRequest();

  // We define what will happen if the data are successfully sent
  XHR.addEventListener('load', function(event) {
    alert('Succesfully deleted, please reload the graph (it will regenerate).');
  });

  // We define what will happen in case of error
  XHR.addEventListener('error', function(event) {
    alert('Oups! Something goes wrong.');
  });

  // We setup our request & send it
  XHR.open('GET', "/<%=@project_name%>/entities/" + id + "/delete_children");
  XHR.send();
}
</script>

<script src="/js/sigma/sigma.min.js"></script>
<script src="/js/sigma/plugins/sigma.parsers.json.min.js"></script>
<script src="/js/sigma/plugins/sigma.layout.forceAtlas2.min.js"></script>
<script>

  sigma.parsers.json("<%= @json_uri %>", {
    container: 'container',
    renderer: {
        container: document.getElementById('container'),
        type: 'canvas'
    },
    settings: {
      minNodeSize: 1,
      maxNodeSize: 6,
      defaultNodeColor: '#FFFFFF',
      defaultEdgeColor: '#00B8E6',
      defaultLabelColor:'#FFFFFF',
      defaultLabelSize: 11,
      labelThreshold: 7,
      edgeHoverSizeRatio: 3,
      edgeHoverColor: '#ff0000',
      defaultNodeHoverColor: '#ff0000',
      edgeColor: 'default'
    }

  }, function(s) {

    s.graph.nodes().forEach(function(node, i, a) {
      node.x = Math.cos(Math.PI * 2 * i / a.length);
      node.y = Math.sin(Math.PI * 2 * i / a.length);
      node.size = 1;
    });

    // adjust slowdown based on the size
    var slowdown = 50;
    if (s.graph.nodes().length > 1000) {
      slowdown = 10;
    }

    // start the layout
    s.startForceAtlas2({gravity:500,scalingRatio:5000,slowDown: slowdown});

    // adjust our stop time based on size
    if (s.graph.nodes().length > 1000) {
      setTimeout(function() { s.stopForceAtlas2(); }, 60000);
    }
    else {
      setTimeout(function() { s.stopForceAtlas2(); }, 15000);
    }

    s.bind('clickNode', function(e) {
      //console.log(e.type, e.data.node.label, e.data.captor);
      //get the list of tasks and rewrite the task
      var entity_location = "entities/" + e.data.node.id + ".json";

      $.getJSON(entity_location, function(data){
        $('#overlay').html('<p>Current graph generated at: <%= @graph_generated_at.strftime("%I:%M%p") if @graph_generated_at %>.</p>Node: <a target="_blank" href=entities/' + e.data.node.id + '>'+ e.data.node.type + ": " + e.data.node.label + '</a><br/>');
        // Aliases
        $('#overlay').append("<p>Aliases:<ul>")
        for (let x of data["aliases"])
        {
            // Do something
            $('#overlay').append('<li><a target="_blank" href=entities/' + x.id + '>'+ x.name + '</a></li>');
        }
        // Task Runs
        $('#overlay').append("<p>Found By:<ul>")
        for (let x of data["task_results"])
        {
            // Do something
            $('#overlay').append('<li><a target="_blank" href=results/' + x.id + '>'+ x.name + '</a></li>');
        }

        $('#overlay').append("</ul></p>")
        $('#overlay').append("<p><a href=javascript:delete_entity_children("+ e.data.node.id +")>(Delete children)</a></p>")
      });
    });
    //s.bind('overNode outNode clickNode doubleClickNode rightClickNode', function(e) {
    //    console.log(e.type, e.data.node.label, e.data.captor);
    //});
  }
 );
</script>
